<template>
  <div>
    <el-select class="item-select" v-model="areaId" placeholder="请选择区域" clearable @change="selectFn(0)">
      <el-option
        v-for="item in areaList"
        :key="item.deptId"
        :label="item.deptName"
        :value="item.deptId"
      />
    </el-select>
    <el-select class="item-select" v-show="areaId" v-model="streetId" placeholder="请选择区域" clearable @change="selectFn(1)">
      <el-option
        v-for="item in streetList"
        :key="item.deptId"
        :label="item.deptName"
        :value="item.deptId"
      />
    </el-select>
    <el-select class="item-select" v-show="streetId" v-model="communityId" placeholder="请选择区域" clearable @change="selectFn(2)">
      <el-option
        v-for="item in communityList"
        :key="item.deptId"
        :label="item.deptName"
        :value="item.deptId"
      />
    </el-select>
    <el-select class="item-select" v-show="communityId" v-model="plotId" placeholder="请选择区域" clearable @change="selectFn(3)">
      <el-option
        v-for="item in plotList"
        :key="item.deptId"
        :label="item.deptName"
        :value="item.deptId"
      />
    </el-select>
  </div>
</template>

<script>
import deptApi from '@/api/system/dept';
export default {
  name: "communitySelect",
  props: {
    bindId: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      areaId: null, // 区域Id
      areaList: [], // 区域列表

      streetId: null, // 街道Id
      streetList: [], // 街道列表

      communityId: null, // 社区Id
      communityList: [], // 社区列表

      plotId: null, // 小区Id
      plotList: [], // 小区列表
    }
  },
  mounted() {
    this.getListFn();
  },
  methods: {
    async getListFn(parentId = 0, level = 0) {
      const typeList = ['area', 'street', 'community', 'plot']
      const res = await deptApi.deptTreeList({ parentId, status: 0 });
      this[typeList[level] + 'List'] = res.data.list
    },
    selectFn(level) {
      const typeList = ['area', 'street', 'community', 'plot']
      if(level === 0 && !this.areaId) {
        this.areaId = null;
        this.streetId = null;
        this.communityId = null;
        this.plotId = null;
        this.streetList = [];
        this.communityList = [];
        this.plotList = [];
        this.$emit('update:bindId', undefined)
      } else if(!this[typeList[level] + 'Id']) {
        this[typeList[level] + 'Id'] = null;
        for (let i = level + 1; i < 4; i++) {
          this[typeList[i] + 'Id'] = null;
          this[typeList[i] + 'List'] = [];
        }
        this.$emit('update:bindId', this[typeList[level - 1] + 'Id'])
      } else if(this[typeList[level] + 'Id']) {
        for(let i = level + 1; i < 4; i++) {
          this[typeList[i] + 'Id'] = null;
          this[typeList[i] + 'List'] = [];
        }
        if(level !== 3)this.getListFn(this[typeList[level] + 'Id'], level + 1);
        this.$emit('update:bindId', this[typeList[level] + 'Id'])
      }
      this.$emit('selected')
    },
    resetFn() {
      this.areaId = 0
      this.selectFn(0)
    }
  }
}
</script>
<style scoped>
.item-select {
  +& {
    margin-left: 10px;
  }
}
</style>
